<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../echarts.js"></script>
	</head>

	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 90%;height:300px;border: 1px solid #ccc;"></div>
	</body>

</html>

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '某站点用户访问来源',
			subtext: '纯属虚构',
			x: 'center'
		},
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		legend: {
			orient: 'vertical',
			right: '20%',
			bottom: '10%',
			data: ['Higher than planned', 'Lower than planned', 'No Learn']
		},
		series: [{
			name: '访问来源',
			type: 'pie',
			
			radius: '55%',
			center: ['50%', '60%'],
			data: [{
				value: 335,
				name: 'Higher than planned'
			}, {
				value: 310,
				name: 'Lower than planned'
			}, {
				value: 234,
				name: 'No Learn'
			}],
			itemStyle: {
				emphasis: {
					
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(red, 0, 0, 0.5)'
				}
			}
		}]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>